<template>
  <div id="leftMenuOne" class="unselect" :class="menuType == 2 && isCustomSide ? 'custom-menu-one' : ''">
    <!-- 头部 -->
    <section class="header" :style="headerStyle" @click="showBuildingBucket" v-if="!(menuType == 2 && isCustomSide)">
      <avatar
        shape="square"
        :size="menuType == 2 ? 40 : 36"
        :style="avatorStyle"
        :src="avator"
      ></avatar>
      <div class="title mt-5" v-if="collapsed" key="header_collapsed">
        <span class="mr-2">{{
          $store.getters.buildingInfo.checkedBuildingCount
        }}</span>
        楼宇
        <CaretRightOutlined />
      </div>
      <template v-else>
        <div class="title-ctn" key="header_uncollapse">
          <div class="title">{{ $store.getters.orgInfo.org_name }}</div>
          <div class="title" v-if="!isSpecialOrg">
            {{ menuType == 2 ? "选择" : "" }}
            <span class="mr-2">{{
              $store.getters.buildingInfo.checkedBuildingCount
            }}</span
            >楼宇
          </div>
        </div>
        <div class="right-icon" v-if="!isSpecialOrg">
          <CaretRightOutlined />
        </div>
      </template>
    </section>



    <template v-if="menuType == 2">
      <section
        class="menu-type-2"
        :style="{
          backgroundImage: !isCustomSide ? `url(${$utils.staticPath}images/common/menu_bg.png)` : '',
        }"
      >
        <div v-if="menuType == 2 && isCustomSide" class="flx-center" :style="{height: '200px', position: 'relative'}">
          <div class="collapse-icon" @click.stop="onCollapse">
            <MenuUnfoldOutlined v-if="collapsed" />
            <MenuFoldOutlined v-else />
          </div>
          <div class="header-content">
            <div class="avatar">
              <img :src="$store.getters.userInfo.avatar" alt="avatar"/>
            </div>
            <div class="username">{{ $store.getters.userInfo.realname }}</div>
            <div class="title" v-if="!isSpecialOrg" @click="showBuildingBucket">
              {{ menuType == 2 ? "选择" : "" }}
              <span class="mr-2">{{
                  $store.getters.buildingInfo.checkedBuildingCount
                }}</span
              >楼宇
              <CaretRightOutlined />
            </div>
          </div>
        </div>
        <a-menu
          mode="inline"
          theme="dark"
          :selectedKeys="selectedMenu"
          :openKeys="openedMenu"
          class="menu hide-scroller-bar"
          :class="isCustomSide ? 'custom-menu' : ''"
          id="menuType2"
          @select="onType2MenuSelect"
          :inlineIndent="12"
          :style="{
            background: 'transparent',
            color: isCustomSide ? '#fff' : 'rgba(255, 255, 255, 0.8)',
          }"
          @openChange="onOpenChange"
          @mouseover="mouseover"
          @mouseleave="mouseleave"
        >
          <!-- :inlineIndent="12" -->
          <template
            v-for="item in type2MenuList"
            :key="'menu$' + item.alias + '$' + item.id"
          >
            <template v-if="!item.children || !item.children.length">
              <a-menu-item :key="'menu$' + item.alias + '$' + item.id">
                <template #icon v-if="item.icon">
                  <cu-icon :type="item.icon"></cu-icon>
                </template>
                <span>{{ item.name }}</span>
              </a-menu-item>
            </template>
            <template v-else>
              <sub-menu
                :menu-info="item"
                :key="'menu$' + item.alias + '$' + item.id"
              />
            </template>
          </template>

          <a-divider
            :style="{ borderColor: 'rgba(255,255,255,0.2)', margin: '10px 0' }"
            v-if="appList.length > 0"
          />

          <a-menu-item
            v-for="item of appList"
            :key="'app$' + item.id"
            class="type2-app"
          >
            <img
              v-if="item.app_logo"
              :src="item.app_logo"
              class="type2-app-icon"
            />
            <span v-if="!collapsed"> {{ item.short_name || item.app_name }}</span>
          </a-menu-item>

          <!-- <a-menu-item-group key="setting-group">
            <sub-menu :menu-info="setting" :key="setting.alias" />
          </a-menu-item-group> -->
        </a-menu>

        <!-- <div class="footer-btn">
          <div class="btn-item" @click="handleNoticeClick">
            <cu-icon :type="notice.icon" style="font-size: 16px" />
            <span style="margin-left: 12px">{{ notice.name }}</span>
          </div>
          <a-badge
            :count="$store.getters.noticeCount"
            class="notice"
            :numberStyle="{ fontSize: '10px', padding: 0 }"
          >
          </a-badge>
        </div> -->
        <img v-if="menuType == 2 && isCustomSide" :src="logo" class="menu-logo"/>
      </section>
    </template>

    <template v-else>
      <!-- 一级菜单 -->
      <section class="list-ctn" v-if="menuList.length > 0">
        <ul class="list">
          <li
            class="item"
            v-for="item of menuList"
            :key="item.id"
            @click="RouteUtils.onMenuChange({ menu: item })"
            :class="item.id == currentMenuId ? 'active' : ''"
            :style="{ height: itemHeight + 'px' }"
          >
            <list-item
              :collapsed="collapsed"
              :content="item"
              :show-tip="true"
              :menu-id="currentMenuId"
            ></list-item>
          </li>
        </ul>
      </section>
      <!-- 常用应用 -->
      <section
        class="list-ctn app-list"
        :style="{ height: appListHeight + 'px' }"
        v-if="appList.length"
      >
        <ul class="list">
          <li
            class="item"
            v-for="item of appShowList"
            :key="item.id"
            :style="{ height: itemHeight + 'px' }"
            @click="RouteUtils.onMenuChange({ menu: item })"
            :class="item.id == currentAppId ? 'active' : ''"
            :title="item.app_name"
          >
            <a-tooltip placement="right" v-if="collapsed">
              <template #title>
                <span>{{ item.app_name }}</span>
              </template>
              <img
                v-if="item.app_logo"
                :src="item.app_logo"
                class="app-icon active-app-icon"
              />
              <cu-icon
                v-else
                class="icon"
                type="org-menu-yingyong"
                :style="colIconStyle"
              ></cu-icon>
            </a-tooltip>
            <template v-else>
              <img v-if="item.app_logo" :src="item.app_logo" class="app-icon" />
              <cu-icon v-else class="icon" type="org-menu-yingyong"></cu-icon>
              <span class="name">{{ item.short_name || item.app_name }}</span>
            </template>
          </li>
          <!-- </a-tooltip>
        </template> -->

          <!-- 更多应用 -->
          <template v-if="appMoreList.length">
            <a-popover
              class="popover"
              placement="rightTop"
              arrow-point-at-center
            >
              <template #content>
                <ul class="list">
                  <li
                    class="item pop-item"
                    v-for="item of appMoreList"
                    :key="item.id"
                    :style="{ height: itemHeight + 'px' }"
                    @click="RouteUtils.onMenuChange({ menu: item })"
                    :class="item.id == currentAppId ? 'active2' : ''"
                  >
                    <img
                      v-if="item.app_logo"
                      :src="item.app_logo"
                      class="app-icon"
                    />
                    <cu-icon
                      v-else
                      class="icon"
                      type="org-menu-yingyong"
                    ></cu-icon>
                    <span class="name">{{
                      item.short_name || item.app_name
                    }}</span>
                  </li>
                </ul>
              </template>
              <li class="item">
                <list-item
                  :collapsed="collapsed"
                  :content="moreApp"
                  :show-tip="false"
                ></list-item>
              </li>
            </a-popover>
          </template>
        </ul>
      </section>
      <!-- 操作（通知、设置） -->
      <section class="list-ctn opt-list">
        <ul class="list">
          <li
            class="item"
            :style="{ height: itemHeight + 'px' }"
            @click="handleNoticeClick"
          >
            <list-item
              :collapsed="collapsed"
              :content="notice"
              :show-tip="false"
            ></list-item>
            <a-badge
              :count="$store.getters.noticeCount"
              class="system-left-notice"
              :class="{ notice2: !collapsed }"
            >
            </a-badge>
          </li>
          <li
            class="item"
            @click="handleSettingClick"
            :style="{ height: itemHeight + 'px' }"
            v-if="setting"
          >
            <list-item
              :collapsed="collapsed"
              :content="setting"
              :show-tip="false"
            ></list-item>
          </li>
        </ul>
      </section>
    </template>

    <template v-if="!$store.getters.isMobile">
      <!-- 消息通知弹窗 -->
      <notice-list
        :visible="noticeVisible"
        @cancel="noticeVisible = false"
        @newMessage="noticeVisible = true"
      />
    </template>

    <img v-if="menuType == 2 && isCustomSide" src="https://fe.dhcc.work/appManage/assets/png/menu-bg1-025ab0b5.png" class="menu-bg1"/>
  </div>

</template>

<script>
import { Avatar } from "ant-design-vue";
import {
  FrownOutlined,
  RightOutlined,
  CaretRightOutlined,
  RightCircleOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from "@ant-design/icons-vue";
import {
  computed,
  defineComponent,
  reactive,
  ref,
  watch,
  nextTick,
  toRefs,
} from "vue";
import store from "../../store/index";
import defaultSetting from "../../common/utils/defaultSetting";
import defaultAvator from "../../common/images/common/building_icon.png";
import NoticeList from "./notice/NoticeList.vue";
import RouteUtils from "../../router/router.utils";
import {useRoute, useRouter} from "vue-router";
import _ from "lodash";

const moreApp = { id: "moreApp", name: "更多", icon: "org-gengduo" };
const notice = {
  id: "noticeList",
  alias: "noticeList",
  name: "通知",
  icon: "org-menu-xiaoxi",
  active_icon: "org-menu-xiaoxi-xuanzhong",
  app: "main",
  parent_id: 0,
};

const colIconStyle = {
  fontSize: `${defaultSetting.COL_FONT_SIZE}px`,
};

const ListItem = {
  name: "ListItem",
  props: {
    collapsed: Boolean,
    content: Object,
    showTip: Boolean,
    menuId: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      colIconStyle,
    };
  },
  template: `
        <template v-if="collapsed" key="menu_collapse" style="background: transparent; color: rgba(255, 255, 255, 0.8);">
            <a-tooltip placement="right" v-if="showTip">
              <template #title>
                <span class="menu-title">{{ content.name}}</span>
              </template>
              <cu-icon class="icon" v-if="content.id == menuId" key="actived_icon" :type="content.active_icon" :style="colIconStyle"></cu-icon>
              <cu-icon class="icon" v-else :type="content.icon" key="normal_icon" :style="colIconStyle"></cu-icon>
            </a-tooltip>
            <template v-else>
               <cu-icon class="icon" v-if="content.id == menuId" key="actived_icon" :type="content.active_icon" :style="colIconStyle"></cu-icon>
               <cu-icon class="icon" v-else :type="content.icon" key="normal_icon" :style="colIconStyle"></cu-icon>
            </template>
        </template>
        <template v-else key="menu_uncollapsed">
            <cu-icon  v-if="content.id == menuId" key="actived_icon" class="icon" :type="content.active_icon"></cu-icon>
            <cu-icon  v-else key="normal_icon" class="icon" :type="content.icon"></cu-icon>
            <span class="name ">{{ content.name }}</span>
        </template>
    `,
};

const SubMenu = {
  name: "SubMenu",
  props: {
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  template: `
      <a-sub-menu :key="'menu$' + menuInfo.alias + '$' + menuInfo.id" style="background: transparent">
       <template #icon v-if="menuInfo.icon">
         <cu-icon :type="menuInfo.icon"></cu-icon>
       </template>
      <template #title>
        <span>{{ menuInfo.name }}</span>
      </template>
      <template v-for="item in menuInfo.children" :key="'menu$' + item.alias + '$' + item.id">
        <template v-if="!item.children || !item.children.length">
          <a-menu-item :key="'menu$' + item.alias + '$' + item.id">
            <span>{{ item.name }}</span>
            <cu-icon
                v-if="item.url_type == 'target_url'"
                class="target_url_icon"
                type="org-caozuo-wailian"
            ></cu-icon>
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="'menu$' + item.alias + '$' + item.id"/>
        </template>
      </template>
    </a-sub-menu>
  `,
};
export default defineComponent({
  name: "SideMenuOne",
  components: {
    Avatar,
    ListItem,
    FrownOutlined,
    RightOutlined,
    CaretRightOutlined,
    NoticeList,
    SubMenu,
    RightCircleOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
  },
  setup(props, context) {
    const $route = useRoute();
    const $router = useRouter();

    const itemHeight = ref(40); // 每个菜单的高度

    const avator = computed(() =>
      store.getters.orgInfo.org_avatar
        ? store.getters.orgInfo.org_avatar
        : defaultAvator
    );

    const avatorStyle = computed(() =>
      store.getters.orgInfo.org_avatar
        ? {}
        : {
            background: "#fff",
            padding: "10px",
          }
    );

    const menuType = computed(() => store.getters.userInfo.pc_menu_type);

    const isCustomSide = computed(() => !!store.getters.customSideMenu);
    const logo = computed(() => store.getters.basicConfig.system_logo);
    const lastCollapsed = ref(false);

    // const menuType = ref(2);

    const initialState = () => ({
      headerStyle: "display: flex;",
      /**
       * 头部高度
       * 展开高度： 头部高度padding(15+15) + 头像高度/title高度(40) = 95
       * 收起高度： 头部高度padding(15+15) + title margin(5) + title高度(20) = 70
       */
      headerHeight: 70,
      /**
       * 菜单高度：paddingTop(20) + borderTop(1) + 菜单高度（itemHeight * 菜单个数）
       */
      menuHeight: 0,
      /**
       * 底部操作栏高度：itemHeight * 菜单个数(2)
       */
      optHeight: itemHeight.value * 2,
      // 应用列表
      // appList: [],
      appShowList: [],
      appMoreList: [],
      // 选中的是菜单(menu)还是应用(app)
      selectType: "menu",
      selectIndex: 0,
      noticeVisible: false,
      // 窗口高度
      windowHeight: document.body.scrollHeight,
      // selectedMenu: [],
      // openedMenu: [],
      // type2MenuList: [],
    });

    const selectedMenu = ref([]);
    const openedMenu = ref([]);
    const type2MenuList = ref([]);

    let timeout = null;
    watch(
      () => store.getters.resizeTrigger,
      () => {
        if (timeout) {
          clearTimeout(timeout);
          timeout = null;
        }
        timeout = setTimeout(() => {
          state.windowHeight = document.body.scrollHeight;
        }, 400);
      }
    );

    const menuList = computed(() => {
      return store.getters.userMenu.filter((item) => item.hide != true);
    });

    const appList = computed(() => {
      let showApp = (store.getters.menuNameList || []).find((v) => v == 'applications') || store.getters.orgInfo?.org_type === 'workAi';
      if (showApp) {
        return store.getters.appList;
      } else {
        return [];
      }
    });

    watch(menuList, () => {
      if (menuType.value == 2) {
        getType2MenuList();
      }
    });

    const getType2MenuList = () => {
      if (!menuList.value.length) {
        return;
      }
      console.log("menuList", menuList.value);
      console.log("appList", appList.value);
      if (setting.value) {
        type2MenuList.value = [...menuList.value, setting.value];
      } else {
        type2MenuList.value = [...menuList.value];
      }
      getType2SelectedMenu();
      nextTick(() => {
        setScrollTop();
      });
    };

    const setScrollTop = () => {
      setTimeout(() => {
        const type2Menu = document.querySelector("#menuType2");
        if (type2Menu) {
          const activeEl =
            document.querySelector("#menuType2 > .ant-menu-item-selected") ||
            document.querySelector("#menuType2 > .ant-menu-submenu-selected");
          if (activeEl) {
            const rect = activeEl.getBoundingClientRect();
            // console.log("activeEl: rect ", rect);
            let scrollTop = 0;
            if (rect.top > 0) {
              scrollTop = rect.height + rect.top - type2Menu.offsetHeight;
            }
            if (scrollTop > 0) {
              type2Menu.scrollTop = scrollTop + 40;
            } else {
              type2Menu.scrollTop = 0;
            }
          }
        }
      }, 400);
    };

    const allMenuList = computed(() => store.getters.menuList);

    let menuClick = false;
    const onType2MenuSelect = (e) => {
      console.log("onType2MenuSelect: ", e);
      const { key } = e;
      // state.selectedMenu = [key];
      const keyArr = key.split("$");
      let currentMenu = {};
      if (keyArr[0] == "menu") {
        currentMenu = allMenuList.value.find((item) => item.id == keyArr[2]);
        if (
          ["inviteColleague", "changeCompany", "getHelp"].includes(keyArr[1])
        ) {
          context.emit("settingClick", { current: currentMenu });
          return;
        }
      } else {
        currentMenu = appList.value.find((item) => item.id == keyArr[1]);
      }

      console.log("currentMenu", currentMenu);

      menuClick = true;
      RouteUtils.onMenuChange({ menu: currentMenu });
    };

    const getType2SelectedMenu = () => {
      if ($route.name == "apps") {
        const currentApp = appList.value.find(
          (app) => `/apps/${app.app_micro}/${app.app_url}` == $route.fullPath
        );
        if (currentApp) {
          selectedMenu.value = [getType2MenuKey(currentApp)];
        }
      } else if ($route.name == "iframes") {
        let checkedMenus = allMenuList.value.filter(
          (item) => item.arrKey == $route.query.key
        );
        if (checkedMenus.length) {
          selectedMenu.value = [getType2MenuKey(checkedMenus[0])];
          getOpendMenu(checkedMenus[0]);
        }
      } else {
        let checkedMenus = allMenuList.value.filter(
          (item) => item.alias == $route.name
        );
        if (checkedMenus.length > 1) {
          let paramsArr = [];
          for (let key in $route.query) {
            paramsArr.push(`${key}=${$route.query[key]}`);
          }
          checkedMenus = checkedMenus.filter(
            (item) =>
              item.alias == $route.name && paramsArr.join("&") == item.param
          );
        }
        console.log("checkedMenus: ", checkedMenus[0]);
        if (checkedMenus.length) {
          selectedMenu.value = [getType2MenuKey(checkedMenus[0])];
          getOpendMenu(checkedMenus[0]);
        }
      }
    };

    const onOpenChange = (openKeys) => {
      const latestOpenKey = openKeys.find(
        (key) => openedMenu.value.indexOf(key) === -1
      ); // 点击菜单key
      // console.log(latestOpenKey, 'openKeys2222222222222===')
      if (latestOpenKey) {
        const key = findMenuKey(
          type2MenuList.value,
          (data) => getType2MenuKey(data) === latestOpenKey,
          []
        );
        // console.log(key, 'openKeys33333333333333===')
        openedMenu.value = key;
      } else {
        openedMenu.value = openKeys;
      }
    };

    const getOpendMenu = (checkedMenu) => {
      if (checkedMenu.parent_id != 0) {
        const parentMenu = allMenuList.value.find(
          (it) => it.id == checkedMenu.parent_id
        );
        const key = getType2MenuKey(parentMenu);
        if (!openedMenu.value.includes(key)) {
          let openKeys = _.cloneDeep(openedMenu.value);
          openKeys.push(key);
          onOpenChange(openKeys);
        }
        getOpendMenu(parentMenu);
      }
    };

    const getType2MenuKey = (menu) => {
      if (menu.alias) {
        return `menu$${menu.alias}$${menu.id}`;
      } else {
        return `app$${menu.id}`;
      }
    };

    watch($route, (route) => {
      getType2SelectedMenu();
      if (!menuClick) {
        nextTick(() => {
          setScrollTop();
        });
      } else {
        menuClick = false;
      }
    });

    const setting = computed(() => {
      const hideMenu = store.getters.hideMenu;
      for (let i in hideMenu) {
        if (hideMenu[i].alias === "setting") {
          return hideMenu[i];
        }
      }
    });

    const state = reactive(initialState());
    const setState = (params) => {
      for (let key in params) {
        state[key] = params[key];
      }
    };
    const initState = () => {
      Object.assign(state, initialState());
    };

    const collapsed = computed(() => store.getters.collapsed);

    watch(collapsed, (val) => {
      if (val) {
        itemHeight.value = defaultSetting.COL_ITEM_HEIGHT;
        setState({ headerStyle: "display: block" });
      } else {
        itemHeight.value = defaultSetting.UNCOL_ITEM_HEIGHT;
        initState();
      }
    });

    const currentAppId = computed(() => {
      const app = store.getters.currentApp;
      if (app && app.id) {
        return app.id;
      }
      return 0;
    });
    const currentMenuId = computed(() => {
      if (currentAppId.value) {
        store.dispatch("ClearCurrentMenu");
        return 0;
      } else {
        const userMenu = store.getters.userMenu;
        const currentTopMenu = store.getters.currentTopMenu;
        if (
          userMenu &&
          userMenu.length &&
          currentTopMenu &&
          currentTopMenu.alias
        ) {
          return currentTopMenu.id;
        }
        return 0;
      }
    });

    // 常用应用列表的高度
    const appListHeight = computed(() => {
      if (menuType.value == 1) {
        const headerH = store.getters.collapsed ? 95 : 70;
        const menuH = menuList.value.length
          ? 20 + itemHeight.value * (menuList.value.length + 1)
          : 0;
        const usedH = appList.value.length
          ? headerH + menuH + state.optHeight
          : 0;
        const appListH = state.windowHeight - usedH;
        let showList = [];
        let moreList = [];
        if (appList.value.length) {
          // 去掉padding border + 底部的间距
          const listHeight = appListH - 20 - 1 - 20;
          const count = parseInt(listHeight / itemHeight.value) - 1;
          if (count > 0) {
            showList = appList.value.slice(0, count);
          }
          if (count < appList.value.length) {
            moreList = appList.value.slice(count, appList.value.length);
          }
        }
        setState({
          headerHeight: headerH,
          menuHeight: menuH,
          appShowList: showList,
          appMoreList: moreList,
        });
        return appListH;
      }
      return 0;
    });

    // 设置
    const handleSettingClick = () => {
      context.emit("settingClick");
    };

    // 通知
    const handleNoticeClick = () => {
      state.noticeVisible = true;
    };

    // 是否特殊机构
    const isSpecialOrg = computed(() => {
      if (store.getters.orgInfo && store.getters.orgInfo.org_special) {
        setState({ headerStyle: "cursor:default" });
        return true;
      } else {
        return false;
      }
    });

    const showBuildingBucket = () => {
      if (isSpecialOrg.value) {
        return;
      }
      store.dispatch("SetBuildingVisible", true);
    };

    const findMenuKey = (menus, func, path) => {
      if (!menus) return [];
      for (const data of menus) {
        path.push(getType2MenuKey(data));
        if (func(data)) return path;
        if (data.children) {
          const findChildren = findMenuKey(data.children, func, path);
          if (findChildren.length) return findChildren;
        }
        path.pop();
      }
      return [];
    };

    const onCollapse = () => {
      lastCollapsed.value = !collapsed.value;
      store.dispatch("SetCollapsed", !collapsed.value);
    };

    const mouseover = () => {
      if (lastCollapsed.value && menuType.value == 2 && isCustomSide.value) {
        // 如果上一次是收起
        store.dispatch("SetCollapsed", false);
      }
    };

    const mouseleave = () => {
      if (lastCollapsed.value && menuType.value == 2 && isCustomSide.value) {
        // 如果上一次是收起
        store.dispatch("SetCollapsed", true);
      }
    }

    const init = () => {
      lastCollapsed.value = collapsed.value;
      if (collapsed.value) {
        itemHeight.value = defaultSetting.COL_ITEM_HEIGHT;
        setState({ headerStyle: "display: block" });
      } else {
        itemHeight.value = defaultSetting.UNCOL_ITEM_HEIGHT;
      }
      getType2MenuList();
    };

    init();

    return {
      ...toRefs(state),
      menuType,
      collapsed,
      appListHeight,
      notice,
      setting,
      moreApp,
      itemHeight,
      menuList,
      handleSettingClick,
      handleNoticeClick,
      currentMenuId,
      showBuildingBucket,
      avator,
      avatorStyle,
      appList,
      colIconStyle,
      currentAppId,
      RouteUtils,
      onType2MenuSelect,
      isSpecialOrg,
      onOpenChange,
      isCustomSide,
      logo,
      onCollapse,
      selectedMenu,
      openedMenu,
      type2MenuList,
      mouseover,
      mouseleave,
    };
  },
});
</script>

<style lang="less" scoped>
@normalPadding: 15px;
// @itemHeight: 40px;
.nowrap {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
ul {
  margin: 0;
}

.type2-style {
  background-color: rgba(0, 21, 41, 0.96);
  box-shadow: inset 0 -1px 0 0 #344258;
}

#leftMenuOne {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    font-size: 12px;
    overflow: hidden;
    padding: @normalPadding 10px;
    text-align: center;
    cursor: pointer;
    position: relative;
    box-shadow: 2px 0px 4px 0 rgba(255, 255, 255, 0.2);
    z-index: 2;
    :deep(.ant-avatar > img) {
      object-fit: contain;
    }
    .title-ctn {
      margin-left: 10px;
      line-height: 20px;
      flex: 1;
      overflow: hidden;
      text-align: left;
      .title {
        height: 20px;
        transform: scale(1);
      }
    }
    .title {
      // &:extend(.nowrap);
      white-space: nowrap;
      line-height: 18px;
      height: 18px;
      transform: scale(0.9);
    }
    .right-icon {
      position: absolute;
      right: 4px;
      bottom: 15px;
    }
  }
  .list-ctn {
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
  }
  .app-list {
    flex: 1;
  }
  .opt-list {
    border-top: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
.list {
  .active {
    background: rgba(255, 255, 255, 0.2);
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
  }
  .active2 {
    color: @primary-color;
    font-weight: bold;
  }

  .app-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  .active-app-icon {
    width: 24px;
    height: 24px;
  }
  .pop-item {
    &:hover {
      background: @primary-color-bg;
      border-radius: 4px;
    }
  }
  &:deep(.item) {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    // height: @itemHeight;
    box-sizing: border-box;
    cursor: pointer;
    padding: 5px 10px 5px @normalPadding;
    position: relative;

    .icon {
      font-size: 16px;
    }
    .name {
      // &:extend(.nowrap);
      overflow: hidden;
      white-space: nowrap;
      flex: 1;
      margin-left: 10px;
      font-size: 14px;
    }
    .system-left-notice {
      position: absolute;
      transform: scale(0.9);
      right: 4px;
      top: 0px;
    }
    .notice2 {
      right: 10px;
      top: 10px;
    }
  }
}

.setting-list {
  .item {
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
  }
  &:deep(.ant-divider-horizontal) {
    margin: 10px 0;
  }
}

.menu-type-2 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: bottom;
  background-repeat: no-repeat;
  z-index: 2;
  // display: flex;
  // flex-direction: column;
  :deep(.ant-menu-dark .ant-menu-inline.ant-menu-sub) {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
  }
  :deep(.ant-menu-item-selected) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 1) !important;
  }
  :deep(.ant-menu-dark .ant-menu-item) {
    color: rgba(255, 255, 255, 0.8);
  }

  .menu {
    height: 100%;
    overflow: hidden auto;
    padding-bottom: 20px;
  }

  .footer-btn {
    &:extend(.type2-style);
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0px -2px 20px 0px rgba(255, 255, 255, 0.8);
    .btn-item {
      height: 100%;
      display: flex;
      align-items: center;
      cursor: pointer;
      flex: 1;

      &:hover {
        color: #fff;
      }
    }
  }
}

.type2-app {
  display: flex;
  align-items: center;
  flex-wrap: false;
  line-height: 24px;

  .type2-app-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-right: 10px;
    margin-top: -4px;
  }
}
.menu-bg1 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
}
.menu-logo {
  z-index: 1;
  width: 60%;
  margin: 20px auto;
}
.flx-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar {
  position: relative;
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  overflow: hidden;
  border: 6px solid #ffffff;
  border-radius: 24px;
  img {
    width: 100%;
    height: 100%;
  }

}
.username {
  font-size: 18px;
  color: #fff;
  text-align: center;
}
.collapse-icon {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 3;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
.custom-menu {
  padding: 0 20px;
  flex: 1;
  :deep(.ant-menu-item-selected) {
    background: var(--sloth-menu-active-bg)!important;
  }
  :deep(.ant-menu-item) {
    border-radius: 8px;
    color: #fff!important;
    .ant-menu-item-icon {
      color: #fff!important;
      opacity: 1!important;
    }
    &:hover {
      background: var(--sloth-menu-item-hover-color)!important;
    }
  }
  :deep(.ant-menu-submenu-title) {
    border-radius: 8px;
    color: #fff!important;
    .ant-menu-item-icon {
      color: #fff!important;
    }
    &:hover {
      background: var(--sloth-menu-item-hover-color)!important;
    }
  }
  :deep(.ant-menu-submenu-open) {
    background-color: #009add!important;
    border-radius: 8px!important;
  }
  :deep(.ant-menu-submenu-arrow) {
    color: #fff!important;
    opacity: 1!important;
  }
}
.custom-menu-one {
  background: linear-gradient(222deg,#0064be,#00bfeb 91%);
  .menu-type-2 {
    display: flex;
    flex-direction: column;
  }
}
.header-content {
  .title {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}
:deep(.target_url_icon) {
  font-size: 12px!important;
  margin-left: 3px;
}
</style>
